Everything worked perfectly fine until all of a sudden it didn't anymore.

I have a button with a on-click event. When I click on it, it calls the method giveToParent() which emits a string:

<template>
  <div>
    <button @click="giveToParent()">search</button>
  </div>
</template>

<script>
export default {
...
  methods: {
    giveToParent() {
      var sql = "select * from xxxxx where min_Price=20";

      this.$emit("clicked", sql);


      console.log(this.$emit("clicked", sql));
    },

In the parent (app.vue) it looks like this:

<template>
  <Menu_Filter @clicked="test()"></Menu_Filter>
</template>

<script>
import Menu_Filter from "./components/Menu_Filter";
import { loadMap } from "./packs/my_js_file.js";

export default {
...
  },
  methods: {
    test(value) {
      logInConsole(value);
      loadMap(value);
    },
    
  },
};

The error message is the following: As you can see, it says object is not a function, which is true, because the $emit function seems to be a vue component. I can log something else with no problem, so it has to be the $emit function.

The weird thing is that it all worked and suddenly it didn't anymore. I even had an older version of this on my laptop and when I tried to execute it there, it failed as well.

I seriously don't know why is doesn't work anymore.